<!--
 * @Description:
 * @Author: HYH
 * @LastEditors: HYH
 * @LastEditTime: 2023-07-11 14:37:18
-->
<template>
  <div>
    <el-form ref="form" :model="FormData">
      <el-row>
        <div class="title">
          <div class="title-bar"></div>
          <div>{{ $t('销量') }}</div>
        </div>
      </el-row>
      <el-row>
        <div style="width: 100%; min-height: 300px" id="SaleChart"></div>
      </el-row>
      <el-row>
        <div style="width: 100%; min-height: 300px" id="SaleChartTow"></div>
      </el-row>
      <el-row>
        <div style="width: 100%; min-height: 300px" id="SaleChartThree"></div>
      </el-row>
      <el-row :gutter="20" style="margin-top: 30px">
        <el-col :span="12">
          <el-form-item prop="skuNameCn">
            <div>
              <el-row>
                <div class="title">
                  <div class="title-bar"></div>
                  <div>{{ $t('供应商报价') }}</div>
                </div>
              </el-row>
              <el-empty description="待完善"></el-empty>
              <!-- <el-table :data="tableData" border style="width: 100%">
                <el-table-column show-overflow-tooltip align="center" prop="manufacturersName" :label="$t('供应商')" />
                <el-table-column show-overflow-tooltip align="center" prop="skuUnitPrice" :label="$t('报价')" />
                <el-table-column show-overflow-tooltip align="center" prop="createTime" :label="$t('报价时间')" />
              </el-table> -->
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="skuNameCn">
            <div>
              <el-row>
                <div class="title">
                  <div class="title-bar"></div>
                  <div>{{ $t('历史价格') }}</div>
                </div>
              </el-row>
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column align="center" type="index" :label="$t('序号')" />
                <!-- 单价 -->
                <el-table-column align="center" show-overflow-tooltip prop="purchaseRemark" :label="$t('单价')">
                  <template slot-scope="{ row }">
                    <span>{{ row.payPrice / row.num }}</span>
                    <span
                      :class="
                        row.payPriceUnit == 1
                          ? 'red'
                          : row.payPriceUnit == 2
                          ? 'yellow '
                          : row.payPriceUnit == 3
                          ? 'blue'
                          : ''
                      "
                    >
                      {{ handlePriceUnit(row.payPriceUnit) }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column align="center" show-overflow-tooltip prop="num" :label="$t('采购数量')" />
                <el-table-column align="center" show-overflow-tooltip prop="createTime" :label="$t('采购日期')" />
              </el-table>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: right">
      <el-button type="primary" @click="submitForm">{{ $t('保存修改') }}</el-button>
      <el-button @click="cancel">{{ $t('关闭') }}</el-button>
    </div>
  </div>
</template>

<script>
import { getInfo, sellRecords } from '@/api/distribution/sku/purchaseInformation'
import { getPurchaseListByDistributor } from '@/api/purchasingManage/manufacturerPurchaseOrder'
import * as echarts from 'echarts'

export default {
  name: 'ErpDistributionSystemPlusPurchaseInformation',

  data() {
    return {
      backFormDate: {},
      FormData: {},
      tableData: [],
      formOne: { dataX: [], dataY: [] },
      formTow: { dataX: [], dataY: [] },
      formThree: { dataX: [], dataY: [] },
    }
  },
  created() {
    const skuid = this.$parent.$parent.skuInfo.skuId
    getInfo(skuid).then((res) => {
      this.backFormDate = res.data
      this.FormData = JSON.parse(JSON.stringify(this.backFormDate))
      this.$parent.$parent.updateSkuImg(res.data?.imgUrl)
    })
  },
  mounted() {
    this.getsellRecords(1)
    this.getsellRecords(2)
    this.getsellRecords(3)
    this.getPurchaseHisList()
  },

  methods: {
    handlePriceUnit(id) {
      // <!-- 付款总价单位 1-RMB 2-JPY 3-USD -->
      if (id == 1) return 'RMB'
      if (id == 2) return 'JPY'
      if (id == 3) return 'USD'
    },
    getPurchaseHisList() {
      getPurchaseListByDistributor({
        pageNum: 1,
        pageSize: 10,
        skuId: this.$parent.$parent.skuInfo.skuId,
      }).then((res) => {
        this.tableData = res.rows
        // console.log(JSON.parse(JSON.stringify(res)));
      })
    },
    getsellRecords(type) {
      sellRecords({ skuId: this.$parent.$parent.skuInfo.skuId, type }).then((res) => {
        res.data.map((item, index) => {
          if (type == 1) {
            this.formOne.dataX.push(item.date)
            this.formOne.dataY.push(item.sellNum)
          } else if (type == 2) {
            this.formTow.dataX.push(item.date)
            this.formTow.dataY.push(item.sellNum)
          } else if (type == 3) {
            this.formThree.dataX.push(item.date)
            this.formThree.dataY.push(item.sellNum)
          }
        })
        if (type == 1) {
          this.setSaleChart()
        } else if (type == 2) {
          this.setSaleChartTow()
        } else if (type == 3) {
          this.setSaleChartThree()
        }
      })
    },
    // 验证数据是否改变
    validFormData() {
      let FormDataChange = null
      if (JSON.stringify(this.backFormDate) == JSON.stringify(this.FormData)) {
        FormDataChange = false
      } else {
        FormDataChange = true
      }
      return FormDataChange
    },
    setSaleChart() {
      var chartDom = document.getElementById('SaleChart')
      var myChart = echarts.init(chartDom)
      var option = {
        title: {
          left: 'center',
          text: this.$t('近30天销量统计'),
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          type: 'category',
          data: this.formOne.dataX,
          axisLabel: {
            // interval: 0,
            // show: true,
            // rotate: 45, // 将标签旋转为45度
          },
        },
        dataZoom: [
          {
            type: 'slider', // 使用滑动条
            xAxisIndex: [0], // 对第一个X轴（索引为0）应用数据区域缩放
            start: 0, // 初始范围的起始值（0表示从头开始）
            end: 100, // 初始范围的结束值（50表示初始显示前50%的数据）
          },
        ],
        grid: {
          right: 20,
          bottom: 30,
          top: 30,
        },
        label: {
          show: true,
          position: 'top',
          color: 'red',
          valueAnimation: true,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: this.formOne.dataY,
            type: 'bar',
            barWidth: '30%',
            itemStyle: {
              color: '#37a2da',
            },
          },
        ],
      }
      option && myChart.setOption(option)
    },
    setSaleChartTow() {
      var chartDom = document.getElementById('SaleChartTow')
      var myChart = echarts.init(chartDom)
      var option = {
        title: {
          left: 'center',
          text: this.$t('近90天销量统计'),
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          type: 'category',
          data: this.formTow.dataX,
          axisLabel: {
            // interval: 0,
            // show: true,
            // rotate: 45, // 将标签旋转为45度
          },
        },
        dataZoom: [
          {
            type: 'slider', // 使用滑动条
            xAxisIndex: [0], // 对第一个X轴（索引为0）应用数据区域缩放
            start: 0, // 初始范围的起始值（0表示从头开始）
            end: 100, // 初始范围的结束值（50表示初始显示前50%的数据）
          },
        ],
        grid: {
          right: 20,
          bottom: 30,
          top: 30,
        },
        label: {
          show: true,
          position: 'top',
          color: 'red',
          valueAnimation: true,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: this.formTow.dataY,
            type: 'bar',
            barWidth: '30%',
            itemStyle: {
              color: '#37a2da',
            },
          },
        ],
      }
      option && myChart.setOption(option)
    },
    setSaleChartThree() {
      var chartDom = document.getElementById('SaleChartThree')
      var myChart = echarts.init(chartDom)
      var option = {
        title: {
          left: 'center',
          text: this.$t('近一年销量统计'),
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            text: this.$t('销量'),
          },
        },
        xAxis: {
          type: 'category',
          data: this.formThree.dataX,
          axisLabel: {
            interval: 0,
            show: true,
            // rotate: 45, // 将标签旋转为45度
          },
        },
        // dataZoom: [
        //   {
        //     type: 'slider', // 使用滑动条
        //     xAxisIndex: [0], // 对第一个X轴（索引为0）应用数据区域缩放
        //     start: 0, // 初始范围的起始值（0表示从头开始）
        //     end: 50, // 初始范围的结束值（50表示初始显示前50%的数据）
        //   },
        // ],
        grid: {
          right: 0,
          bottom: 30,
          top: 30,
        },
        label: {
          show: true,
          position: 'top',
          color: 'red',
          valueAnimation: true,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: this.formThree.dataY,
            type: 'bar',
            barWidth: '30%',
            itemStyle: {
              color: '#37a2da',
            },
          },
        ],
      }
      option && myChart.setOption(option)
    },
    submitForm() {},
    cancel() {
      this.$parent.$parent.cancel()
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  align-items: center;
  height: 17px;
  font-size: 17px;
  margin: 10px 0 20px 0;

  &-bar {
    width: 2px;
    height: 100%;
    margin-right: 5px;
    background: #7b7979;
  }
}
</style>
